<template>
	<view style="padding: 20rpx;background-color: #f7f7f7;">
		<view class="typeList"
			style="background-color: #ffffff;border-radius: 20rpx;display: flex;padding: 20rpx;margin-bottom: 30rpx;flex-direction: column;"
			v-for="(item, ind) in devices" :key="ind">
			<view style="display: flex;height: 250rpx;">
				<view class="typeImg" style="margin-left: 20rpx;flex: 1;width: 250rpx;">
					<image :src="item.device.imageUrl" mode=""></image>
				</view>
				<view class="typeDetail">
					<view class="typeTitle">
						房间名:{{item.roomName}}
					</view>
					<view class="typeTitle">
						设备代码:{{item.deviceCode}}
					</view>
					<view class="tagList">
						<!-- {{item.mealDetail}} -->
						<view class="typeTitle">
							房间状态:{{item.status | formatStatus}}
						</view>
					</view>
				</view>
			</view>
			<view style="flex: 1;display: flex;">
				<view class="checkMore">
					<text @click="closeDoor(item.deviceId,item.status)">关闭电源</text>
				</view>
				<view class="checkMore">
					<text @click="openDoor(item.deviceId,item.device.deviceType)">保洁开门</text>
				</view>
				<view class="checkMore">
					<text @click="update(item.id,item.status)">打扫完毕</text>
				</view>
			</view>
			<!-- <view style="flex: 1;display: flex;margin-top: 30rpx;">
				<view style="">
					<text class="checkMore" @click="toGateway(item.deviceId)">网关设备</text>
				</view>
			</view> -->
		</view>

		<view style="height: 20rpx;"></view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		formatDate
	} from '@/common/date';
	export default {
		components: {

		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		filters: {
			formatStatus(status) {
				if (status == 0) {
					return '已打扫'
				}
				if (status == 1) {
					return '使用中'
				}
				if (status == 2) {
					return '待打扫'
				}
				if (status == 3) {
					return '离线中'
				}
				if (status == 4) {
					return '已禁用'
				}
			}
		},
		data() {
			return {
				storeId: 0,
				devices: [],
				banners: [
					'/static/b1.jpg',
					'/static/b2.jpg'
				],
				swiperCurrent: 0,
				isAdmin: ''
			}
		},
		onLoad(options) {
			let that = this;
			that.storeId = options.storeId;
			console.log('111=' + options.isAdmin)
			this.isAdmin = options.isAdmin;
			that.loadData(options.storeId);
		},
		methods: {
            toGateway(deviceId) {
				console.log("设备ID=" + deviceId);
				let that = this;
				let storeId = that.storeId;
				console.log("店铺ID=" + storeId);
				uni.navigateTo({
					url: '/pages/order/gateaway?deviceId=' + deviceId + '&storeId=' + storeId
				})
			},
			async openDoor(deviceId,deviceType) {
				console.log('deviceType='+deviceType)
				let that = this;
				let data = await Api.apiCall('get', Api.qsg.openDoor, {
					deviceId: deviceId,
				});
				if (data) {
					console.log(data)
					if (data == 1) {
						uni.showToast({
							icon: 'error',
							title: '有正在进行的订单'
						})
					} else {
						uni.showToast({
							icon: 'success',
							title: '操作成功'
						})
						if(deviceType==1){
							console.log('开始开门')
							that.openDoorTmp(deviceId)
						}
					}
				}
			},
			async openDoorTmp(deviceId) {
				console.log('开门中')
				let data = await Api.apiCall('get', Api.qsg.openDoorTmp, {
					deviceId: deviceId,
				});
				if (data) {
					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})
				}
			},
			async closeDoor(deviceId,status) {
				if (this.isAdmin == 'false') {
					uni.showModal({
						title: '提示',
						content: '此操作仅限管理员操作',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						}
					});
					return;
				}
				if(status==1){
					uni.showModal({
						title: '提示',
						content: '当前房间有订单正在进行',
						showCancel: false,
						success: function(res) {
						}
					});
					return;
				}
				let data = await Api.apiCall('get', Api.qsg.closeDoor, {
					deviceId: deviceId,
				});
				if (data) {
					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})
				}
			},
			clearOrder(roomId) {
				let that = this;
				if (that.isAdmin == 'false') {
					uni.showModal({
						title: '提示',
						content: '您没有权限清除该房间正在进行的订单,如有需要联系该门店管理员',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '该按钮将清除该房间正在进行的订单和修改状态为可预订,确定进行吗?',
						success: function(res) {
							if (res.confirm) {
								that.affirmClear(roomId);
							}
						}
					});
				}
			},
			async affirmClear(roomId) {
				let params = {
					id: roomId,
				}
				let data = await Api.apiCall('post', Api.qsg.clearOrder, params);
				if (data) {
					this.loadData(this.storeId);
				}
			},
			update(roomId, status) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定打扫完毕并且关门吗?',
					success: function(res) {
						if (res.confirm) {
							let params = {
								id: roomId,
								status: 0
							}
							that.updateRoom(params)
						} else if (res.cancel) {

						}
					}
				});
			},
			async updateRoom(params) {
				let data = await Api.apiCall('post', Api.qsg.updateRoom, params);
				if (data) {
					this.loadData(this.storeId);
				}
			},
			async loadData(storeId) {
				let that = this;
				that.getDevices(storeId);
			},
			async getDevices(storeId) {
				let params = {
					storeId: storeId
				}
				let data = await Api.apiCall('get', Api.qsg.roomList, params);
				if (data) {
					this.devices = data
				}
			},
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			}
		}
	}
</script>

<style lang="scss">
	.first {
		background-color: beige;
		height: calc(100% - 40px);
	}
	
	.clear{
		width: 110rpx;
		height: 42rpx;
		background: #dc0000;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 42rpx;
		text-align: center;
		margin-top: 20rpx;
	}
	
	.checkMore{
		width: 110rpx;
		height: 42rpx;
		background: #0DA944;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 42rpx;
		text-align: center;
		margin-left: 80rpx;
		margin-top: 20rpx;
	}

	.typeImg {
		width: 190rpx;
		height: 190rpx;
		margin-right: 20rpx;
	}

	.costNum {
		font-size: 28rpx;
		color: #e61a0f;
		font-weight: bold;
	}

	.typeTitle {
		font-size: 25rpx;
		font-weight: 500;
		line-height: 50rpx;
		color: #62b074;
		flex: 1;
	}

	.typeImg image {
		width: 240rpx;
		height: 200rpx;
		border-radius: 12rpx;
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 30upx;
		bottom: 230upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	.tagList {
		overflow: hidden;
		height: 40rpx;
	}

	.typeCost {
		width: 100%;
		height: 50rpx;
		line-height: 62rpx;
	}

	.typeDetail {
		width: 100%;
		height: 190rpx;
		display: flex;
		flex-direction: column;
	}

	.typeList {
		display: flex;
		height: 310rpx;
		padding: 30rpx 0;
		box-sizing: border-box;
		border-bottom: 1px solid #f7f6ff;
	}

	.typeList:first-child {
		padding-top: 0;
	}

	.priceSign {
		font-size: 24rpx;
	}

	.typeTag {
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		height: 40rpx;
		line-height: 40rpx;
		background: #f5f5fa;
		font-size: 25rpx;
		color: #62b074;
		margin-right: 14rpx;
		font-size: 600;
		border: none;
	}

	.priceNum {
		font-size: 32rpx;
		font-weight: bold;
	}

	.priceIcon {
		font-size: 24rpx;
	}

	.schoolName {
		width: 750rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 50rpx;
		font-weight: bold;
		color: #000000;
	}

	.uni-input {
		padding: 0 24rpx;
	}

	.choese {
		width: 750rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 30rpx;
		color: #888888;
	}

	.dataName {
		height: 60rpx;
	}

	.currentSchool {
		height: 60rpx;
		background: #FFFFFF;
	}

	.video-tit {
		font-size: 30rpx;
		color: #000;
		font-weight: bold;
		display: inline-block;
		vertical-align: top;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.video-price {
		font-size: 30rpx;
		color: #ecb20d;
		overflow: hidden;
		display: inline-block;
		vertical-align: top;
		text-align: center;
		box-sizing: border-box;
	}

	.video-reader {
		font-size: 24rpx;
		color: #666;
	}

	.video-describe {
		flex: 3;
		display: inline-block;
		vertical-align: top;
	}

	.video-cover {
		width: 100rpx;
		height: 100rpx;
		margin: 30rpx 30rpx 30rpx 0;
		display: inline-block;
		vertical-align: top;
		border-radius: 50%;
		flex: 1;
	}

	.video-cover image {
		width: 100rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 50%;
	}

	.video-content {
		width: 690rpx;
		padding: 22rpx 0;
		border-bottom: 1rpx solid #e6e6e6;
		box-sizing: border-box;
		display: flex;
	}

	.video-content:last-child {
		border: none;
	}

	.video-list {
		width: 750rpx;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
</style>
